<template>
          <div class="fly-panel" style="margin-bottom: 0;">
            <div class="fly-panel-title fly-filter" >
              <a  @click="serch()" class="layui-this">综合</a>
              <span class="fly-mid"></span>
              <a @click="serch(0)">未结</a>
              <span class="fly-mid"></span>
              <a @click="serch(1)">已结</a>
              <span class="fly-mid"></span>
              <a @click="serch(2)">精华</a>
              <span class="fly-filter-right layui-hide-xs">
                <a @click="serch(3)" class="layui-this">按最新</a>
                <span class="fly-mid"></span>
                <a @click="serch(4)">按热议</a>
              </span>
            </div>
    <list-item :lists="lists" @nextpage="nextpage()" :isEnd="isEnd"></list-item>
          </div>
    </template>
    
    <script>
      import { getList } from '@/api/content'
      import ListItem from './ListItem'
    export default {
      name: 'list',
      data(){
        return{
          current:'',
          isEnd: false,
          status: '',
          tag: '',
          sort: 'created',
          page: 0,
          catalog: '',
          limit: 4,
          catalog: '',
          lists:[],
          isRepeat: false,
        }
      },
      components: {
        ListItem
      },
      mounted(){
        this._getLists()
      },
      watch:{
        current (newval, oldval){
          // console.log('current:' + oldval + ','+newval);
          this.page = 0
          this.isEnd = false
          this._getLists()
        }
      },
      methods: {
        nextpage(){
          this.page ++
          this._getLists()
        },
        serch(val){
          if(typeof val === 'undefined' && this.current==='') {
            return
          }
          this.current = val
          console.log(val);
          switch(val){
            case 0:
              this.status = '0'
              this.tag = ''
              break
              case 1:
              this.status = '1'
              this.tag = ''
              break
              case 2:
              this.status = ''
              this.tag = '精华'
              break
              case 3:
              this.sort = 'new'
              break
              case 4:
              this.sort = 'answer'
              break
              default:
              this.status = ''
              this.tag = ''
              this.current = ''
              
          }
        },
        _getLists(){
          if(this.isRepeat)return
          if(this.isEnd) return
          this.isRepeat = true
          let options = {
            catalog: this.catalog,
            isTop: 0,
            page: this.page,
            sort: this.sort,
            tag: this.tag,
            status: this.status,
            // lists: this.lists
          }
          getList(options).then((res)=>{
            //加锁防止用户多次点击
            this.isRepeat = false
            if(res.code === 200){
              if(res.data.length < this.limit){
                this.isEnd = true
              }
              if(this.lists.length ===0){
                this.lists = res.data
              }else{
                  this.lists = this.lists.concat(res.data)
              }
            }
          }).catch((err)=>{
            console.log(err);
            this.isRepeat = false
            if(err){
              console.log(err);
              this.$alert(err.message)
            }
          })
        }
      }
    
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped lang="scss">
    
    </style>
    